<template>
  <div class="person3">
    <h1>当前的数字为：{{ sum }}</h1>
    <button @click="sumAdd()">点击数字加1</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person3'
}
</script>


<script setup lang="ts">
import {ref, watch} from "vue";

// 数据
let sum = ref(0);

// 方法
function sumAdd() {
  sum.value += 1;
};

// 监视
watch(sum, (newValue,oldValue) => {
  console.log("sum变化了",newValue,oldValue)
});

</script>

<style scoped>
.person3 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>